<template>
    <div class="home">
        <div class="top-bg absolute h-36 -z-10 
        w-screen bg-gradient-to-b from-orange-500 to-white"></div>
        <van-search
            v-model="searchField"
            placeholder="请输入搜索关键字"
            show-action
            shape="round"
            background="transparent"
            class="mb-2"
        >
            <template #action>
                <div class="text-white">
                    <van-icon name="shopping-cart-o" size="1.25rem"/>
                </div>
            </template>
        </van-search>
        <main class="flex flex-col space-y-4 ">
            <header class="w-[calc(100vw-2rem)] min-h-24 bg-white rounded-2xl 
            p-2 shadow-md self-center">
               <section class="topbar flex justify-around mb-3">
                <div class="topbar-item flex flex-col items-center" 
                    v-for="item in topBarState"
                    :key="item.title"
                >
                    <div class="topbar-item__icon">
                        <van-icon :name="item.icon" size="2rem" />
                    </div>
                    <div class="topbar-item__text text-xs">{{item.title}}</div>
                </div>
               </section> 
               <!--蔚来 未来汽车-->
               <van-button type="primary" block size="small" 
               color="rgb(246, 247, 248)">
                    <div class="text-black flex">
                        <van-icon name="apps-o" size="1rem"/>
                        <span class="text-xs ml-2 font-bold">
                        所有分类
                        </span>
                    </div>
               </van-button>
            </header>
            <section 
            class="navbar flex overflow-x-scroll w-screen space-x-4 px-4">
                <div class="navbar-item flex flex-col border rounded-lg 
                flex-[0_0_auto] w-24"
                    v-for="item in navBarState"
                    :key="item.title">
                    <div class="navbar-item__text text-xs p-2 pb-0">
                    {{item.title}}
                    </div>
                    <div class="navbar-item__icon self-end p-2">
                        <van-icon :name="item.icon" size="1.5rem"/>
                    </div>
                </div>
            </section>
            <section>
                <h2 class="title">最近浏览</h2>
                <RecentlyViewCard :items="recentlyViewedState"/>
            </section>
             <section>
                <h2 class="title">想去哪里玩？</h2>
                <div class="flex w-screen overflow-x-scroll space-x-2 px-4">
                <div class="region-item flex-[0_0_auto]" v-for="item in discountInfo" :key="item.region">
                    <div class="item-wrapper w-32 h-20 rounded-lg overflow-hidden relative">
                    <img :src="item.discounts[0].cover" alt="" />
                    <div class="item-mask absolute w-full h-full bg-black opacity-20 bottom-0"></div>
                    <div class="item-title absolute z-10 text-sm font-bold text-white bottom-1 left-1">{{ item.region }}</div>
                    </div>
                </div>
                </div>
            </section>
            <section>
                <h2 class="title">探索更多</h2>
                <PromotionalList class="px-4" :items="promotionalList" :next="handleNextPage" />
            </section>
        </main>
    </div>
</template>

<script setup>
// 数据？
// pinia 数据管理 + 组件显式
import RecentlyViewCard from '@/components/RecentlyViewCard.vue'
import { ref, toRefs } from 'vue';
import { useHomeStore } from '@/store/homeStore'
import { useDiscountStore } from '@/store/discountStore'
const homeStore = useHomeStore()
const discountStore = useDiscountStore()
const searchField = ref('')
//
const { topBarState, navBarState, recentlyViewedState} = toRefs(homeStore)
const { discountInfo } = toRefs(discountStore) 
</script>

<style lang="scss" scoped>

</style>